<template>
  <div class="app-breadcrumb-container">
    <div>当前位置：</div>
    <a-breadcrumb>
      <a-breadcrumb-item v-for="(item, index) in items" :key="index">
        <a :href="item.path">{{ item.meta.title }}</a></a-breadcrumb-item
      >
    </a-breadcrumb>
  </div>
</template>

<script>
import { constantRouterMap } from "@/config/router.config";

export default {
  name: "AppBreadcrumb",
  components: {},
  props: {},
  data() {
    return {};
  },

  computed: {
    // 面包屑数据
    items() {
      // concat 返回一个新的数组
      let matchedArr = this.$route.matched.concat();

      // 因为首页比较特殊，必须一直显示在面包屑第一个，如果没有首页路由信息，手动添加到最前面
      if (matchedArr && matchedArr[0].meta.title !== "首页") {
        const homeRoute = constantRouterMap[0];
        matchedArr.unshift(homeRoute);
      }

      return matchedArr;
    },
  },

  methods: {},
};
</script>

<style scoped lang="less">
.app-breadcrumb-container {
  display: flex;
  align-items: center;
  margin: var(--margin-x-small) 0;
}
</style>
